<template>
  <div class="searchView">
    <div class="header">
      <div class="left" @click="back">
        <van-icon name="arrow-left" size="25" />
      </div>
      <div class="search">
        <van-icon name="search" size="23" color="#a2a2a2" />
        <input
          type="text"
          placeholder="请输入"
          v-model="searchText"
          @input="searching"
        />
        <div v-if="searchText" class="empty" @click="empty">
          <van-icon name="cross" size="10" color="white" />
        </div>
      </div>
      <div class="right" @click="searched(searchText)">搜索</div>
    </div>
    <div class="likeheader"></div>
    <div class="index" v-if="!searchText">
      <div class="historyBox" v-if="historySearch.length > 0">
        <div class="top">
          <div class="title">历史搜索</div>
          <div class="clear">
            <van-icon
              name="delete-o"
              size="25"
              color="#a2a2a2"
              @click="clearHistory"
            />
          </div>
        </div>
        <div
          class="historys"
          v-if="historySearch.length > 3 && !isShowAllHistroy"
        >
          <div class="left" :class="{ noShowAllHistroy: !isShowAllHistroy }">
            <div
              class="history"
              v-for="(item, index) in historySearch"
              :key="index"
              @click="searched(item)"
            >
              {{ item }}
            </div>
          </div>
          <div class="right">
            <van-icon
              name="arrow-down"
              size="20"
              color="#999"
              @click="showAllHistroy"
            />
          </div>
        </div>
        <div class="historys" v-else>
          <div class="left">
            <div
              class="history"
              v-for="(item, index) in historySearch"
              :key="index"
              @click="searched(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="searchHotBox">
        <div class="top">
          <div class="title">热门搜索</div>
        </div>
        <div class="searchHots" v-if="searchHot.suggestdetails">
          <div
            class="searchHot"
            v-for="(item, index) in searchHot.suggestdetails"
            :key="index"
            :style="{
              color: item.color,
              borderColor: item.borderColor,
              backgroundColor: item.background_color,
            }"
            @click="searched(item.title)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="index" v-else-if="searchText">
      <div class="suggests" v-if="searchSuggests.suggests.length > 0">
        <searchSuggest
          v-for="(suggest, index) in searchSuggests.suggests"
          :key="index"
          :suggest="suggest"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import searchSuggest from "@/components/searchSuggest.vue";
import { storeToRefs } from "pinia";
import { useDouguoStore } from "@/stores/douguo";
import { ref, type Ref } from "vue";
import lodash from "lodash";
import router from "@/router";

const douguo = useDouguoStore();

const { searchHot, searchSuggests } = storeToRefs(douguo);
const { updataSearchHot, updataSearchSuggests } = douguo;

updataSearchHot();

const historySearch = ref(
  JSON.parse(localStorage.getItem("historySearch") || "[]").reverse()
);
const searchText: Ref<string> = ref("");

const searching = lodash.debounce(() => {
  if (searchText.value) {
    // console.log("searching", searchText.value);
    updataSearchSuggests(searchText.value);
  }
}, 500);

const back = () => {
  // console.log("back");
  history.go(-1);
};

const searched = (kw: string) => {
  let historySearch = new Set(
    JSON.parse(localStorage.getItem("historySearch") || "[]")
  );
  // console.log(historySearch);

  router.push({ path: "searched", query: { kw } });
  historySearch.add(kw);
  // console.log(historySearch);

  localStorage.setItem(
    "historySearch",
    JSON.stringify(Array.from(historySearch))
  );
};

const clearHistory = () => {
  // console.log("clearHistory");
  historySearch.value = [];
  localStorage.removeItem("historySearch");
};

const isShowAllHistroy: Ref<boolean> = ref(false);

const showAllHistroy = () => {
  // console.log("showAllHistroy", isShowAllHistroy.value);
  isShowAllHistroy.value = true;
};

const empty = () => {
  // console.log("empty");
  searchText.value = "";
};
</script>

<style lang="scss" scoped>
.searchView {
  padding: 0 13px;

  .likeheader {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 20px;
    position: fixed;
    left: 0;
    top: 0;

    .left {
      // margin-left: 10px;
      cursor: pointer;
      margin-left: 13px;
    }

    .search {
      width: 244px;
      height: 40px;
      border-radius: 10px;
      background-color: #f6f6f6;
      display: flex;
      align-items: center;
      padding-left: 14px;

      input {
        width: 170px;
        background: none;
        outline: none;
        border: 0px;
        color: #a2a2a2;
        margin-left: 5px;
        height: 20px;
        line-height: 20px;
        padding: 0;
        padding-bottom: 3px;
      }

      input[type="text"]:focus,
      input[type="password"]:focus {
        background: none;
        outline: none;
      }

      .empty {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: #cecece;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        cursor: pointer;
      }
    }

    .right {
      // margin-right: 15px;
      cursor: pointer;
      margin-right: 15px;
    }
  }

  .index {
    .historyBox {
      margin-top: 40px;
      margin-bottom: 20px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .title {
          font-weight: bold;
          font-size: 18px;
        }

        .clear {
          cursor: pointer;
        }
      }

      .historys {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .history {
            font-size: 13px;
            padding: 8px 13px;
            background-color: #fafafa;
            border-radius: 8px;
            margin-right: 13px;
            margin-bottom: 10px;
            cursor: pointer;
          }
        }

        .noShowAllHistroy {
          overflow: hidden;
          height: 42px;
        }

        .right {
          margin-right: 10px;
          padding-bottom: 8px;
          cursor: pointer;
        }
      }
    }

    .searchHotBox {
      margin-bottom: 20px;

      .top {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .title {
          font-weight: bold;
          font-size: 18px;
        }
      }

      .searchHots {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        height: 213px;

        .searchHot {
          font-size: 14px;
          padding: 7px 12px;
          border-radius: 5px;
          border: 1px solid white;
          margin-right: 10px;
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }

    .suggests {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
